import axios from "axios";
import React,{useEffect,useState} from "react";

import User from "./User";
import Getvip from "./Getvip";
import Order from "./Order";
import style from './index.module.css'
const {content} = style

interface Iuser {
    name:string,
    address:string,
    phone:number,
    headPortrait:string,
    realName:boolean,
    ID:string,
    hometown:string,
    house:string
}

export default function My(){

    const [user,setUser] = useState<Iuser>()

    useEffect(()=>{
        axios.get('/api/user_information')
            .then(res=>{
                setUser(res.data as Iuser)
            })
    },[])

    return (
        <div>
            <User name={user?.name} phone={user?.phone} headPortrait={user?.headPortrait}/>
            <div className={content}>
                {/* 
                    必传参数 leftMessage：左边字是什么 routerPush：跳转路由
                    可选参数 color：默认为 #444 rightMessage：默认为 空 
                */}
                <Getvip leftMessage='实名认证' color='#8d582a' rightMessage={user?.realName ? undefined : '成为vip'} routerPush='/realname' User={user ? {ID:user.ID,name:user.name,hometown:user.hometown,house:user.house,realName:user.realName} : undefined}/>
                <Order />

                {/* TODO:修改跳转途径 */}
                <Getvip leftMessage='收货地址' routerPush='/??'/>
                <Getvip leftMessage='联系客服' routerPush='/???'/>
            </div>
        </div>
    )
}